<template>
	<div class="canvasRender" @dragover="allowDrop" @drop="drop">
		<!-- 无场景状态 -->
		<div v-if="!hasScene" class="canvasRender__nodata dfc" :class="isPaddingLeft ? 'paddingLeft' : ''">
			当前案例还没有场景， 请前往
			<span @click="toggleMenu('模板')">模版</span>
			或
			<span @click="toggleMenu('场景')">场景</span>
			添加
		</div>
		<!-- 视频流 -->
		<div class="canvasRender__data" v-if="hasScene">
			<Stream />
		</div>
		<!-- 工具栏 -->
		<CanvasTools v-if="hasScene" />
	</div>
</template>

<script>
import { mapMutations } from 'vuex';
import CanvasTools from './tools';
import Stream from './stream';

export default {
	name: 'CanvasRender',
	components: {
		CanvasTools /* 工具栏 */,
		Stream /* 视频流 */
	},
	props: {
		paddingLeft: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		paddingLeft(val) {
			this.isPaddingLeft = val;
		}
	},
	data() {
		return {
			hasScene: false /* 有无场景 */,
			isPaddingLeft: true /* 是否左偏移 */
		};
	},
	created() {
		this.init();
	},
	destroyed() {
		this.$EventBus.$off('changeMenu');
		this.$EventBus.$off('switchScene');
	},
	methods: {
		...mapMutations('common', {
			sureHasScene: 'sureHasScene'
		}),
		// 初始化
		init() {},

		// 切换到场景模版
		toggleMenu(type) {
			this.$EventBus.$emit('changeMenu', type);
		},

		// 允许放置拖拽元素
		allowDrop(e) {
			$xy.PE(e);
		},

		// 放置的元素
		drop(e) {
			let type = e.dataTransfer.getData('id');

			if (type) {
				if (this.hasScene) {
					this.$EventBus.$emit('switchScene', type);
				} else {
					this.hasScene = true;
					this.sureHasScene(this.hasScene);
				}
			}
		}
	}
};
</script>

<style lang="scss">
.canvasRender {
	height: 100%;
	width: 100%;
	background: #1b1b1b;
	position: relative;

	&__data {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	&__nodata {
		background-color: #1b1b1b;
		color: #fff;
		font-size: 22px;
		font-weight: 400;
		height: 100%;
		width: 100%;
		transition: all 0.3s;

		span {
			padding: 0 5px;
			color: #036dc9;
			text-decoration: underline;
			cursor: pointer;
			@include xy-stopselect;

			&:active {
				color: #0088ff;
			}
		}
	}

	.paddingLeft {
		padding-left: 375px;
	}
}
</style>
